import React, {Fragment} from 'react';
import {
  Text,
  ScrollView,
  RefreshControl,
  StyleSheet,
  Dimensions,
  View,
  Image,
  TextInput,
  TouchableNativeFeedback
  } from 'react-native';
  export default class HomeScreenTop extends React.Component {
         render(){
             return(
              <View style={styles.TopViewStyle}>
              <View style={styles.SaoMiaoStyle}>
                <Image source={require('../index.image/home_searchbar_scan_dark.png')} style={styles.SaoMiaoStyleImage}></Image>
              </View>
              <View style={styles.SoSuoStyle}>
                <TextInput style={styles.SoSuoStyleTextInput} placeholder={'      搜 索 商 店 内 商 品'}></TextInput>
              </View>
              <View style={styles.XiaoXiStyle}>
                <Image source={require('../index.image/XiaoXi.png')} style={styles.XiaoXiStyleImage}></Image>
              </View>
           </View>
            
             )
         }
  }
  const styles = StyleSheet.create({
    TopViewStyle:{
      width:Dimensions.get('window').width,
      height:((Dimensions.get('window').height)/100)*9,
      flexDirection:'row'
    },    
    SaoMiaoStyle:{
      width:(Dimensions.get('window').width/100)*15,
      height:'100%',
      alignItems:'center',
      justifyContent:'center'
    },
    SaoMiaoStyleImage:{
      width:'40%',
      height:'40%'
    },
    SoSuoStyle:{
      width:(Dimensions.get('window').width/100)*70,
      height:'100%',
      alignItems:'center',
      justifyContent:'center'
    },
    SoSuoStyleTextInput:{
      width:'100%',
      height:'50%',
      borderRadius:30,
      backgroundColor:'rgba(255,255,255,0.6)',
      elevation: 3,  //  设置阴影角度，通过这个设置有无阴影（这个是最重要的，决定有没有阴影）
      shadowColor: 'black',  //  阴影颜色
      shadowOffset: { width: 0, height: 0 },  // 阴影偏移
      shadowOpacity: 1,  // 阴影不透明度
      shadowRadius: 30,  //  圆角
      
    },
    XiaoXiStyle:{
      width:(Dimensions.get('window').width/100)*15,
      height:'100%',
      alignItems:'center',
      justifyContent:'center'
    },
    XiaoXiStyleImage:{
      width:'50%',
      height:'40%'
    },
  })